<template>
	<view class="harvest-address" @click="selectAddress">
		<view class="select-harvest-address" v-if="!Object.keys(address).length">
			<button type="primary" size="mini">请选择收获地址+</button>
		</view>
		<view class="selected-harvest-address" v-else>
			<view class="row-1">
				<view class="consignee">
					收货人：{{ address.userName }}
				</view>
				<view class="phone">
					电话：{{ address.telNumber }}
				</view>
			</view>
			<view class="row-2">
				<text>收货地址：{{ detailAddress }}</text>
			</view>
			<view class="icon">
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<image src="../../static/images/cart_border@2x.png" class="cart-border"></image>
	</view>
</template>

<script>
	import { mapGetters,mapMutations,mapState } from 'vuex'
	export default {
		name: "HarvestAddress",
		data() {
			return {
			};
		},
		methods: {
			...mapMutations('user',['updateAddress']),
			async selectAddress() {
				const [err, succ] = await uni.chooseAddress().catch(err => err)
				if (err === null && succ.errMsg === 'chooseAddress:ok') {
					this.updateAddress(succ)
				}
			}
		},
		computed: {
			...mapState('user',['address']),
			...mapGetters('user',['detailAddress']),
		}
	}
</script>

<style lang="scss">
	.harvest-address {


		.select-harvest-address {
			display: flex;
			height: 144rpx;
			align-items: center;
			justify-content: center;

		}

		.cart-border {
			width: 100%;
			height: 8rpx;
		}

		.selected-harvest-address {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 14rpx;
			padding-right: 48rpx;
			height: 108rpx;
			font-size: 24rpx;

			.row-1 {
				display: flex;
				justify-content: space-between;
			}

			.row-2 {
				margin-top: 24rpx;
			}

			.icon {
				position: absolute;
				right: 0;
			}
		}
	}
</style>
